<template>
  <div class="file-card" @dblclick="handleFileOpen">
    <div class="file-card-header">
      <FileTypeIcon :file="file" class="file-type-icon"/>  <!-- 添加图标尺寸控制类 -->
<!--      <el-icon v-show="file.isShared" class="shared-icon"><Share/></el-icon>-->
    </div>
    <div class="file-card-body">
      <div class="file-name">{{ file.fileName }}</div>
      <div class="file-meta">
        <!-- 优化：明确显示文件夹类型标识 -->
        <span v-if="file.fileType === 'folder'" class="meta-text">文件夹</span>
        <span v-else class="meta-text">{{ formatFileSize(file.fileSize || 0) }}</span>
      </div>
    </div>
    <div class="file-actions">
      <el-popover placement="top" trigger="hover" :offset="8" class="file-actions-popover">
        <template #reference>
          <el-icon class="action-icon more-icon"><More/></el-icon>
        </template>
        <div class="popover-actions">  <!-- 优化按钮布局 -->
          <el-button v-if="file.fileType !== 'folder'" size="small" type="success" plain @click.stop="handleDownload">
            <el-icon><Download/></el-icon>
          </el-button>
          <el-button v-if="file.fileType !== 'folder'" size="small" type="info" plain @click.stop="handleShare">
            <el-icon><Share/></el-icon>
          </el-button>
          <el-button size="small" type="danger" plain @click.stop="handleDelete">
            <el-icon><DeleteFilled/></el-icon>
          </el-button>
          <el-button size="small" type="warning" plain @click.stop="handleEdit">
            <el-icon><Edit/></el-icon>
          </el-button>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import { Share, More, Download, DeleteFilled, Edit } from '@element-plus/icons-vue'
import { formatFileSize } from '@/utils/format.js'

const props = defineProps({
  file: {
    type: Object,
    required: true
  }
})

const emits = defineEmits(['open', 'download', 'share', 'delete', 'edit'])

const handleFileOpen = () => emits('open', props.file)
const handleDownload = () => emits('download', props.file)
const handleShare = () => emits('share', props.file)
const handleDelete = () => emits('delete', props.file)
const handleEdit = () => emits('edit', props.file)
</script>

<style scoped>
.file-card {
  background: #fff;
  border-radius: 12px;  /* 增大圆角 */
  padding: 20px 16px;  /* 调整上下内边距 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);  /* 调整阴影柔和度 */
  transition: all 0.3s ease-out;  /* 优化过渡效果 */
  min-width: 160px;  /* 限制最小宽度避免变形 */
}
.file-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);  /* 悬停阴影加深 */
}
.file-type-icon {
  width: 64px;  /* 固定图标尺寸 */
  height: 64px;
  margin: 0 auto 8px;  /* 图标居中 */
}
.file-name {
  font-weight: 500;
  color: #333;  /* 加深文字颜色 */
  font-size: 14px;  /* 调整字体大小 */
  margin-bottom: 4px;  /* 增加名称与元数据间距 */
}
.file-meta {
  text-align: center;  /* 元数据居中 */
}
.meta-text {
  color: #666;  /* 元数据灰色显示 */
  font-size: 12px;
}
.popover-actions {
  display: flex;  /* 按钮横向排列 */
  gap: 8px;  /* 按钮间距 */
  padding: 8px;  /* 弹出框内边距 */
}
.action-icon {
  font-size: 18px;  /* 更多操作图标增大 */
  color: #666;
  transition: color 0.2s;
}
.action-icon:hover {
  color: #409eff;  /* 图标悬停变蓝 */
}

</style>